<script lang="ts" setup>
import { computed } from 'vue';

import { MdiEdit } from '@vben/icons';

import { Button, Select } from 'ant-design-vue';
import dayjs from 'dayjs';

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
  editStatus: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits([
  'update:form',
  'update:editStatus',
  'init',
  'submit',
]);

const formData = computed({
  get() {
    return props.form;
  },
  set(newValue) {
    emit('update:form', newValue);
  },
});

const edit = computed({
  get() {
    return props.editStatus;
  },
  set(newValue) {
    emit('update:editStatus', newValue);
  },
});

// 通知父组件初始化一些接口
const init = () => {
  emit('init');
};

// 取消编辑事件
const cancelEdit = (key: string) => {
  edit.value[key] = false;
  init();
};

// 打开编辑事件 并关闭其他的编辑状态
const openEdit = (key: string) => {
  edit.value[key] = true;
  Object.keys(edit.value).forEach((item) => {
    if (item !== key && edit.value[item]) {
      cancelEdit(item);
    }
  });
};

const submit = async () => {
  emit('submit', 'cancelPolicy');
};

// 办理入住离店的时间 从6点到23点30分 没半小时一个间隔
const timeList = Array.from({ length: 36 }, (_, i) => {
  const hour = Math.floor(i / 2) + 6;
  const minute = i % 2 === 0 ? '00:00' : '30:00';
  return {
    value: `${hour < 10 ? '0' : ''}${hour}:${minute}`,
    label: `${hour < 10 ? '0' : ''}${hour}:${minute}`,
  };
});
</script>

<template>
  <div>
    <div v-if="!edit.cancelPolicy" class="px-4 pb-6">
      <div class="flex items-center justify-between py-1">
        <div class="text-xl font-bold">取消政策</div>
        <div>
          <Button
            class="flex h-auto items-center px-0 py-3"
            type="link"
            @click="openEdit('cancelPolicy')"
          >
            <template #icon>
              <MdiEdit class="icon mr-1" />
            </template>
            编辑
          </Button>
        </div>
      </div>
      <div>
        <div class="text-xl">用户可免费取消时间</div>
        <div>
          <p>
            {{
              formData.freeCancelHours
                ? dayjs(formData.freeCancelHours, 'HH:mm:ss').format('HH:mm')
                : '20:00'
            }}
            之前
          </p>
        </div>
      </div>
    </div>
    <div v-else class="px-4 pb-6">
      <div
        class="card-box sticky top-[-21px] z-[10] flex items-center justify-between rounded-none border-none py-4"
      >
        <div class="text-xl font-bold">取消政策</div>
        <div class="flex items-center">
          <Button
            class="flex h-auto items-center px-5 py-2"
            @click="cancelEdit('cancelPolicy')"
          >
            取消
          </Button>
          <Button
            class="ml-2 flex h-auto items-center px-5 py-2"
            type="primary"
            @click="submit"
          >
            保存
          </Button>
        </div>
      </div>
      <div>
        <div class="text-xl">
          用户可免费取消时间<span class="ml-1 text-red-500">*</span>
        </div>
        <div class="flex items-center pt-2">
          <Select
            v-model:value="formData.freeCancelHours"
            :options="timeList"
            size="large"
            style="width: 180px"
          />
          <span class="ml-2">之前</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.icon {
  color: hsl(var(--primary));
}

.light {
  color: hsl(var(--card-foreground));
}
</style>
